<template>
  <div class="shopping-cart">
    <!-- 标题栏 -->
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>

    <div class="goods-card" v-if="store.itemInCartData.length">
      <!-- 商品列表 -->
      <van-swipe-cell v-for="item in store.itemInCartData" :key="item.cartItemId">

        <div class="main-content">
          <van-checkbox v-model="item.checked" class="checkbox"></van-checkbox>
          <div class="image">
            <img :src="item.goodsCoverImg" alt="">
          </div>

          <div class="right-part">
            <div class="goods-name">
              {{ item.goodsName }}
            </div>
            <div class="goods-price">
              ￥{{ item.sellingPrice }}
            </div>

            <!-- 步进器 -->
            <div class="goods-num">
              <van-stepper v-model="item.goodsCount" integer min="1" max="5" @change="goodsNumChange({ cartItemId: item.cartItemId, goodsCount: item.goodsCount })"/>
            </div>
          </div>

        </div>

        <!-- 右滑删除 -->
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="store.deleteBtn(item.cartItemId)"/>
        </template>
      </van-swipe-cell>
    </div>

    <div v-else>
      嘛也妹有~
    </div>


    <!-- 结算栏 -->
    
    <van-submit-bar :price="store.totalPrice * 100" button-text="提交订单" class="submitBar" decimal-length="2" @submit="onSubmit">
      <van-checkbox :checked="store.isAllChecked" @click="store.toggleAll(store.isAllChecked)">全选</van-checkbox>
      <!-- <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template> -->
    </van-submit-bar>


  </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useCartStore } from '@/store/useCartStore.js'
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
let store = useCartStore();
let route = useRoute();
let router = useRouter();
onMounted(() => {
  store.GetCartData()
})

console.log(store.isAllChecked);

// 点击顶部栏返回
let onClickLeft = () => {
  router.back()
}
// 步进器变化
let goodsNumChange = (data) => {
  store.goodsNumChange(data)
}
// 提交订单
let onSubmit = () => {

  store.checkedGoods()

  if (store.checkedGoodsId.length == 0) {
    // 当未勾选任何商品时
    showToast({
      type: 'fail',
      message: '未选择商品',
      duration: 1000
    });
    return
  }

  // 跳到地址管理页
  router.replace('/addressmanage')
}
</script>

<style scoped lang="less">
.shopping-cart {
  padding-bottom: 3.5rem;

  .goods-card {

    margin: .2rem 0;
    background-color: #FAFAFA;
  }

  .main-content {
    width: 100%;
    height: 2.7rem;
    display: flex;


    .checkbox {
      margin: .2rem;
    }

    .image {
      width: 2.5rem;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .right-part {
      position: relative;
      flex: 1;

      .goods-name {
        font-size: .3rem;
        text-align: center;
        position: absolute;
        left: .6rem;
        top: .6rem;

      }

      .goods-price {
        font-size: .45rem;
        color: red;
        position: absolute;
        left: .05rem;
        top: 1.3rem;
      }

      .goods-num {
        position: absolute;
        right: .5rem;
        bottom: .1rem;
      }
    }

  }

  .delete-button {
    height: 100%;
  }

  .submitBar {
    margin-bottom: 1.3rem;
  }
}
</style>